import React, {useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';

import Layout from '@components/home/layout';
import Banner from '@components/home/banner';
import SectionTitle from '@components/home/section-title'
import IntroText from '@components/home/about/text'
import Cases from '@components/home/case/case-list'
import NewsList from '@components/home/news/news-list'

import { HomeActionTypes } from '@actions/index'

// @connect((state) => ({state})) // @connect 装饰器只能装饰类组件，使用useSelector替代
export default ({ newsList = new Array(10).fill({ 
  id:Math.round(Math.random()*100000),
  title:'2017首届智享UNI创新创业大赛京津冀赛区北京复赛成功决出前三名',
  pic:'http://www.wiste.cn/Public/Uploads/20180117/5a5e81c4aa566.jpg',
  date:'2020-01-30',
}), cases = new Array(10).fill({
  id:Math.round(Math.random()*100000),
  title:'北京蔚蓝海域科技有限公司',
  desc:'蔚蓝海域是一家二次元风格游戏研发商，结合重度MMO玩法，打造市面首款二次元3DMMO手游。',
  pic:'http://www.wiste.cn/Public/Uploads/20170819/59971b3941f92.jpg',
}) }) => {
  
  const dispach = useDispatch();
  
  const {payload: homeData} = useSelector(state=>state.home.homePageData)
  console.log(homeData)

  useEffect(() => {
    dispach({
      type:HomeActionTypes.HOME_PAGE_DATA
    });
  }, []);

  return (
    <Layout>
      
      <Banner src={'http://www.wiste.cn/Public/Uploads/20170816/599430b3ba5f9.jpg'}/>

      <SectionTitle title={'公司简介'} more={'/about'}/>
      <IntroText text={'智银投资成立于2010年，专注于物联网、新兴科技领域早期项目投资。以人大校友为起点，建立了立体的创业服务体系，不仅为企业提供创业所需的资金，旨在帮助早期阶段的创业公司顺利启动和快速成长。'}/>

      <SectionTitle title={'投资案例'} more={'/cases'}/>
      <Cases cases={homeData?.item?.cases}/>

      <SectionTitle title={'最新资讯'} more={'/news'}/>
      <NewsList newsList={homeData?.item?.news}/>

    </Layout>
  );
};
